<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="button" value="按钮" class="btn">
</body>
<script>
  var btn = document.querySelector(".btn")
  
  // 无兼容
  // 绑定
  // btn.onclick = function(){
  //   console.log(1);
  // }
  // btn.onclick = function(){
  //   console.log(2);
  // }
  // 解绑
  // btn.onclick = null;

  // 赋值式绑定事件的特点：同一个元素的相同事件，只能绑定一个事件处理函数
  // 解绑：赋一个null值，覆盖原事件处理函数


  // 监听式绑定事件的特点：同一个元素的相同事件，可以绑定多个事件处理函数

  // 正常浏览器：
  // 绑定
  // btn.addEventListener("click", f1 );
  // btn.addEventListener("click", f2 );
  // 解绑
  // btn.removeEventListener("click", f1 );

  // IE低版本：
  // 绑定
  // btn.attachEvent("onclick", f1);
  // btn.attachEvent("onclick", f2);
  // 解绑
  // btn.detachEvent("onclick", f1);


  addEvent( btn, "click", f1 );
  addEvent( btn, "click", f2 );
  addEvent( btn, "contextmenu", f1 );
  addEvent( btn, "contextmenu", f2 );

  removeEvent( btn, "click", f1 )
  removeEvent( btn, "contextmenu", f2 )

  // 监听式绑定事件的兼容封装
  function addEvent( ele, type, cb ){
    if( ele.attachEvent ){
      ele.attachEvent( "on"+type, cb );
    }else{
      ele.addEventListener( type, cb );
    }
  }
  // 监听式解绑事件的兼容封装
  function removeEvent( ele, type, cb ){
    if( ele.attachEvent ){
      ele.detachEvent( "on"+type, cb );
    }else{
      ele.removeEventListener( type, cb );
    }
  }

  function f1(){
    console.log(1);
  }
  function f2(){
    console.log(2);
  }


</script>
</html>